import React, { Component } from 'react'
import { relations } from '../../../config/movie.toolbar'
import * as d3v5 from "d3";

const width = 774;
const height = 350;

class Relation extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentDidMount() {
    this.initD3()
  }


  initD3 = () => {
    const { nodes, edges } = relations;
    const svg = d3v5.select("#relation_d3box")
      .append('svg')
      .attr("width", width)
      .attr('height', height)
      .style("font", "12px sans-serif")
      .call(
        d3v5.zoom()
          .scaleExtent([-5, 2])
          .on('zoom', handleZoom)
      );

    var simulation = d3v5.forceSimulation(nodes)
      .force('link', d3v5.forceLink(edges).distance(130))
      .force('charge', d3v5.forceManyBody().strength(-100))
      .force('center', d3v5.forceCenter(width / 2, height / 2))
      .on('tick', ticked);

    const color = d3v5.scaleOrdinal(d3v5.schemeCategory10);

    const circleDefs = svg.append('defs')
      .selectAll('pattern')
      .data(nodes)
      .enter()
      .append('pattern')
      .attr('id', (d, i) => {
        return "radiusImage" + d.id
      })
      .attr('x', 0)
      .attr('y', 0)
      .attr('width', 1)
      .attr('height', 1)
      .append('svg:image')
      .attr('width', 120)
      .attr('height', 80)
      .attr('xlink:href', '/image/movie/pic1.jpeg')

    const g = svg.append('g')
      .attr('class', 'svg_cont');

    const circle_list = g.append('g')
      .selectAll('circle')
      .data(nodes)
      .enter()
      .append('circle')
      .attr('r', 40)
      .attr('stroke', '#009AD6')
      .style('fill', (d, i) => {
        return "url(#" + 'radiusImage' + d.id + ")"
      }).call(
        d3v5.drag()
          .on('start', dragstarted)
          .on('drag', dragged)
          .on('end', dragended)
      );


    const nodes_txt = g.append('g')
      .selectAll("text")
      .data(nodes)
      .enter()
      .append("text")
      .style("fill", "#009AD6")
      .attr("dx", 0)
      .attr("dy", 0)
      .style('text-anchor', 'middle')
      .style('font-size', '15px')
      .style('font-weight', 800)
      .style('transform', 'translateY(60px)')
      .text(function (d) {
        return d.name;
      });

    const line_list = g.append('g')
      .selectAll('line')
      .data(edges)
      .enter()
      .append('line')
      .style('stroke', '#009AD6')
      .style('stroke-width', 1);

    //监听拖拽开始
    function dragstarted(d) {
      console.log(d3v5.event)
      //alpha是动画的冷却系数，运动过程中会不断减小，直到小于0.005为止，此时动画会停止。
      if (!d3v5.event.active) simulation.alphaTarget(0.3).restart();
      d.fx = d.x;    //fx为固定坐标，x为初始坐标  注3>
      d.fy = d.y;
    }

    //监听拖拽中
    function dragged(d) {
      d.fx = d3v5.event.x;  //fd3v5.event.x为拖拽移动时的坐标
      d.fy = d3v5.event.y;
    }

    //监听拖拽结束
    function dragended(d) {
      if (!d3v5.event.active) simulation.alphaTarget(0);
      d.fx = null;        //固定坐标清空
      d.fy = null;
    }

    function ticked() {
      line_list.attr("x1", function (d) {
        return d.source.x;
      })
        .attr("y1", function (d) {
          return d.source.y;
        })
        .attr("x2", function (d) {
          return d.target.x;
        })
        .attr("y2", function (d) {
          return d.target.y;
        });

      circle_list.attr("cx", function (d) {
        return d.x;
      })
        .attr("cy", function (d) {
          return d.y;
        });

      // circleDefs.attr("x", function (d) {
      //   return d.x;
      // })
      //   .attr("y", function (d) {
      //     return d.y;
      //   });

      nodes_txt.attr("x", function (d) {
        return d.x;
      })
        .attr("y", function (d) {
          return d.y;
        });
    }

    function handleZoom() {
      g.attr("transform", d3v5.event.transform)
    }

  }

  render() {
    return (
      <div id="relation_d3box"></div>
    )
  }

}

export default Relation
